<template>
  <div>
    <el-dialog
      v-dialog-drag
      title="数据唯一校验"
      :modal="false"
      :appendToBody="false"
      :visible.sync="dialogVisible"
      :close-on-click-modal="false"
      width="65%"
      top="7vh"
    >
      <div class="header">
        <el-row>
          <el-col :span="2">
            <div class="">序号</div>
          </el-col>
          <el-col :span="10">
            <div class="">字段</div>
          </el-col>
          <el-col :span="10">
            <div class="">描述</div>
          </el-col>
          <el-col :span="2">
            <div class="">
              <el-button
                type="text"
                icon="el-icon-circle-plus-outline"
                size="small"
                @click="handleAdd"
              ></el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="body">
        <el-row
          v-for="(row,index) in rowData"
          :key="row._id"
        >
          <el-col :span="2">
            <div class="">{{index+1}}</div>
          </el-col>
          <el-col :span="10">
            <el-input
              :value="row.checkFields"
              clearable
              @clear="handleTableSelectClear(index, 'checkFields')"
            >
              <el-button
                slot="append"
                icon="el-icon-search"
                @click="handleOpenRelExcelFieldDialog(row)"
              ></el-button>
            </el-input>
          </el-col>
          <el-col :span="10">
            <el-input
              v-model="row.desc"
              clearable
            >
            </el-input>
          </el-col>
          <el-col :span="2">
            <div class="">
              <el-button
                type="text"
                icon="el-icon-remove-outline"
                size="small"
                @click="handleDelete(row)"
              ></el-button>
            </div>
          </el-col>
        </el-row>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleSubmit"
        >确定</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <el-dialog
      v-dialog-drag
      width="50%"
      title="excel关联字段"
      :visible.sync="relExcelFieldDialog.visible"
      :modal="true"
      :appendToBody="true"
      top="7vh"
      height="calc(100% - 47px)"
      custom-class="select-dialog"
    >
      <div class="tool-search">
        <el-input
          placeholder="输入关键字进行过滤"
          v-model="relExcelFieldDialog.keyword"
          clearable
          @keyup.enter.native="handleTableSearch"
        >
        </el-input>
        <el-button
          type="primary"
          size="small"
          icon="el-icon-search"
          @click="handleTableSearch"
        >查询</el-button>
      </div>
      <div class="tool-table">
        <el-table
          ref="Table"
          :data="relExcelFieldDialog.tableData"
          stripe
          border
          tooltip-effect="dark"
          style="width: 100%"
          height="calc(100% - 50px - 15px)"
          @select="handleTableSelect"
          @row-click="handleRowClick"
        >
          <el-table-column
            type="selection"
            width="55"
          >
          </el-table-column>
          <el-table-column
            v-for="col in relExcelFieldDialog.columns"
            :key="col.prop"
            :prop="col.prop"
            :label="col.label"
            show-overflow-tooltip
            :min-width="col.minWidth"
          >
          </el-table-column>
        </el-table>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="handleFinishTableSelect"
        >确 定</el-button>
        <el-button @click="relExcelFieldDialog.visible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getFieldListByTable } from '@/api/import/template'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    fieldList: {
      type: Array,
      default: () => []
    },
    defaultValue: {
      type: Array,
      default: () => ([])
    },
    tableId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      rowData: [],
      relExcelFieldDialog: {
        item: {},
        visible: false,
        keyword: '',
        columns: [
          {
            prop: 'excelColumnCode',
            label: '字段名',
            minWidth: '100'
          },
          {
            prop: 'excelColumnName',
            label: '描述',
            minWidth: '100'
          }
        ],
        tableData: []
      }
    }
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
    handleTableSelectClear(index, prop) {
      this.rowData[index][prop] = ''
    },
    // 添加行
    handleAdd() {
      this.rowData.push({
        _id: new Date().getTime(),
        checkFields: '',
        desc: ''
      })
    },
    // 删除行
    handleDelete(row) {
      this.rowData = this.rowData.filter((ele) => {
        return ele._id !== row._id
      })
    },
    // 打开excel关联字段选择弹框
    handleOpenRelExcelFieldDialog(row) {
      this.relExcelFieldDialog.visible = true
      this.relExcelFieldDialog.item = { ...row }
      this.relExcelFieldDialog.tableData = [...this.fieldList]
    },
    // excel关联字段选择弹框 内容搜索
    handleTableSearch() {},
    // excel关联字段选择弹框 行点击
    handleRowClick(row) {
      this.tableSelectControl(row)
    },
    // excel关联字段选择弹框 行勾选
    handleTableSelect(selection, row) {
      this.tableSelectControl(row)
    },
    // excel关联字段选择弹框 行点击/行勾选进行选中
    tableSelectControl(row, refTable = 'Table') {
      // 多选
      row.flag = !row.flag
      this.$refs[refTable].toggleRowSelection(row, row.flag)
    },
    // excel关联字段弹框关闭，对行数据进行赋值
    handleFinishTableSelect() {
      const item = this.relExcelFieldDialog.item
      const selection = this.$refs.Table.selection
      if (!selection?.length) {
        return
      }
      let row = this.rowData.find((ele) => ele._id === item._id)
      row.checkFields = selection.map((ele) => ele.excelColumnCode).join(',')
      this.relExcelFieldDialog.visible = false
    },
    handleSubmit() {
      const datas = []
      this.rowData.forEach((ele) => {
        datas.push({
          id: ele.id || null,
          checkFields: ele.checkFields,
          desc: ele.desc,
          tableId: this.tableId || null
        })
      })
      this.$emit('submit-form', datas)
    },
    resetFields() {
      this.rowData = []
    }
  },
  watch: {
    defaultValue: {
      handler(newVal) {
        if (!newVal?.length) {
          return
        }
        this.rowData = newVal
      }
    }
  }
}
</script>
<style lang="less" scoped>
.el-col {
  min-height: 30px;
  text-align: center;
  padding: 5px 10px;
}
.header {
  padding-right: 10px;
}
.body {
  padding-right: 10px;
  max-height: 160px;
  overflow: auto;
}
.select-dialog {
  .el-dialog__body {
    height: calc(69vh - 170px);
  }
}
.pagination {
  overflow: hidden;
  .pagination-container {
    margin-bottom: 0;
  }
}
.tool-search {
  display: flex;
  .el-input {
    width: 250px;
    margin-right: 10px;
  }
}
.tool-table {
  margin-top: 15px;
  height: calc(100% - 36px - 15px);
}
</style>